<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>心动盲盒</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&family=Orbitron:wght@500;700&display=swap" rel="stylesheet">
</head>
<body>
    <div id="particles-js"></div>
    <div class="app-container">
        <!-- 顶部信息 -->
        <header class="app-header">
            <h1>心动时刻</h1>
            <div class="chances-counter">
                剩余次数: <span id="chances-count">3</span>
            </div>
        </header>

        <!-- 主内容区 -->
        <main class="app-main">
            <!-- 初始能量球界面 -->
            <div id="blind-box" class="main-view">
                 <div class="orb-container">
                     <div class="orb">
                         <div class="orb-core">
                             <span class="orb-text">?</span>
                         </div>
                         <div class="orb-ring"></div>
                         <div class="orb-ring"></div>
                         <div class="orb-ring"></div>
                     </div>
                 </div>
                 <p class="prompt-text">点击开启你的今日缘分</p>
            </div>

            <!-- 轮播区域 (默认隐藏) -->
            <div id="carousel-container" class="main-view">
                <div class="carousel-window">
                    <div id="carousel-track"></div>
                </div>
                <div class="carousel-pointer"></div>
            </div>

            <!-- 无次数提示 -->
            <div id="no-chances" class="fallback-container main-view">
                <h2>今日次数已用完</h2>
                <p>缘分需要耐心，明天再来探索吧！</p>
            </div>
        </main>

        <!-- 底部导航 (装饰) -->
        <footer class="app-footer">
            <div class="nav-item active">🏠<span>首页</span></div>
            <div class="nav-item">💬<span>消息</span></div>
            <div class="nav-item">💖<span>发现</span></div>
            <div class="nav-item">👤<span>我的</span></div>
        </footer>

        <!-- 撒花效果的画布 -->
        <canvas id="confetti-canvas"></canvas>
    </div>
    
    <!-- 结果展示弹窗 -->
    <div id="modal" class="modal-overlay">
        <div class="modal-content">
            <button id="close-modal" class="close-button">&times;</button>
            <!-- 这里使用旧版的卡片结构 -->
            <div id="profile-card" class="card">
                 <div class="card-header">
                     <img id="avatar" src="" alt="用户头像">
                     <div class="user-info">
                         <h2 id="nickname"></h2>
                         <div class="basic-info">
                             <span id="age-gender"></span>
                         </div>
                     </div>
                 </div>
                 <div class="card-body">
                     <h3>个人简介</h3>
                     <p id="self-introduction"></p>
                     <h3>基本信息</h3>
                     <div class="tags">
                         <span id="height"></span>
                         <span id="occupation"></span>
                         <span id="education"></span>
                         <span id="hometown"></span>
                     </div>
                 </div>
                 <div class="card-footer">
                     <button id="ignore-button" class="footer-button secondary">忽略</button>
                     <button id="greet-button" class="footer-button primary">打个招呼 👋</button>
                 </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.2/dist/confetti.browser.min.js"></script>
    <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
    <script src="script.js"></script>
</body>
</html> 